﻿@page "/tests/tables"
<Row>
    <Column ColumnSize="ColumnSize.IsFull.OnDesktop.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Basic Example</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Basic table with lightly padded cells and horizontal dividers.</CardText>
            </CardBody>
            <CardBody>
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>First Name</TableHeaderCell>
                            <TableHeaderCell>Last Name</TableHeaderCell>
                            <TableHeaderCell>Username</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        <TableRow>
                            <TableRowHeader>1</TableRowHeader>
                            <TableRowCell>Mark</TableRowCell>
                            <TableRowCell>Otto</TableRowCell>
                            <TableRowCell>@@mdo</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>2</TableRowHeader>
                            <TableRowCell>Jacob</TableRowCell>
                            <TableRowCell>Thornton</TableRowCell>
                            <TableRowCell>@@fat</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>3</TableRowHeader>
                            <TableRowCell>Larry</TableRowCell>
                            <TableRowCell>the Bird</TableRowCell>
                            <TableRowCell>@@twitter</TableRowCell>
                        </TableRow>
                    </TableBody>
                </Table>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsFull.OnDesktop.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Striped Rows</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>For alternating background colors on the rows, add <code>Striped</code> attribute.</CardText>
            </CardBody>
            <CardBody>
                <Table Striped="true">
                    <TableHeader>
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>First Name</TableHeaderCell>
                            <TableHeaderCell>Last Name</TableHeaderCell>
                            <TableHeaderCell>Username</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        <TableRow>
                            <TableRowHeader>1</TableRowHeader>
                            <TableRowCell>Mark</TableRowCell>
                            <TableRowCell>Otto</TableRowCell>
                            <TableRowCell>@@mdo</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>2</TableRowHeader>
                            <TableRowCell>Jacob</TableRowCell>
                            <TableRowCell>Thornton</TableRowCell>
                            <TableRowCell>@@fat</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>3</TableRowHeader>
                            <TableRowCell>Larry</TableRowCell>
                            <TableRowCell>the Bird</TableRowCell>
                            <TableRowCell>@@twitter</TableRowCell>
                        </TableRow>
                    </TableBody>
                </Table>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.IsFull.OnDesktop.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Bordered Table</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>For borders all around the table, use <code>Bordered</code> attribute.</CardText>
            </CardBody>
            <CardBody>
                <Table Bordered="true">
                    <TableHeader>
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>First Name</TableHeaderCell>
                            <TableHeaderCell>Last Name</TableHeaderCell>
                            <TableHeaderCell>Username</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        <TableRow>
                            <TableRowHeader>1</TableRowHeader>
                            <TableRowCell>Mark</TableRowCell>
                            <TableRowCell>Otto</TableRowCell>
                            <TableRowCell>@@mdo</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>2</TableRowHeader>
                            <TableRowCell>Jacob</TableRowCell>
                            <TableRowCell>Thornton</TableRowCell>
                            <TableRowCell>@@fat</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>3</TableRowHeader>
                            <TableRowCell>Larry</TableRowCell>
                            <TableRowCell>the Bird</TableRowCell>
                            <TableRowCell>@@twitter</TableRowCell>
                        </TableRow>
                    </TableBody>
                </Table>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsFull.OnDesktop.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Hoverable Rows</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>To achieve that "hover" effect when mousing over the table rows, use <code>Hoverable</code> attribute.</CardText>
            </CardBody>
            <CardBody>
                <Table Hoverable="true">
                    <TableHeader>
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>First Name</TableHeaderCell>
                            <TableHeaderCell>Last Name</TableHeaderCell>
                            <TableHeaderCell>Username</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        <TableRow>
                            <TableRowHeader>1</TableRowHeader>
                            <TableRowCell>Mark</TableRowCell>
                            <TableRowCell>Otto</TableRowCell>
                            <TableRowCell>@@mdo</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>2</TableRowHeader>
                            <TableRowCell>Jacob</TableRowCell>
                            <TableRowCell>Thornton</TableRowCell>
                            <TableRowCell>@@fat</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>3</TableRowHeader>
                            <TableRowCell>Larry</TableRowCell>
                            <TableRowCell>the Bird</TableRowCell>
                            <TableRowCell>@@twitter</TableRowCell>
                        </TableRow>
                    </TableBody>
                </Table>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.IsFull.OnDesktop.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Borderless Table</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>For table without any borders set the <code>Borderless</code> attribute.</CardText>
            </CardBody>
            <CardBody>
                <Table Borderless="true">
                    <TableHeader>
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>First Name</TableHeaderCell>
                            <TableHeaderCell>Last Name</TableHeaderCell>
                            <TableHeaderCell>Username</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        <TableRow>
                            <TableRowHeader>1</TableRowHeader>
                            <TableRowCell>Mark</TableRowCell>
                            <TableRowCell>Otto</TableRowCell>
                            <TableRowCell>@@mdo</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>2</TableRowHeader>
                            <TableRowCell>Jacob</TableRowCell>
                            <TableRowCell>Thornton</TableRowCell>
                            <TableRowCell>@@fat</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>3</TableRowHeader>
                            <TableRowCell>Larry</TableRowCell>
                            <TableRowCell>the Bird</TableRowCell>
                            <TableRowCell>@@twitter</TableRowCell>
                        </TableRow>
                    </TableBody>
                </Table>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsFull.OnDesktop.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Small Table</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Add <code>Narrow</code> to make tables more compact by cutting cell padding in half.</CardText>
            </CardBody>
            <CardBody>
                <Table Narrow="true">
                    <TableHeader>
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>First Name</TableHeaderCell>
                            <TableHeaderCell>Last Name</TableHeaderCell>
                            <TableHeaderCell>Username</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        <TableRow>
                            <TableRowHeader>1</TableRowHeader>
                            <TableRowCell>Mark</TableRowCell>
                            <TableRowCell>Otto</TableRowCell>
                            <TableRowCell>@@mdo</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>2</TableRowHeader>
                            <TableRowCell>Jacob</TableRowCell>
                            <TableRowCell>Thornton</TableRowCell>
                            <TableRowCell>@@fat</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>3</TableRowHeader>
                            <TableRowCell>Larry</TableRowCell>
                            <TableRowCell>the Bird</TableRowCell>
                            <TableRowCell>@@twitter</TableRowCell>
                        </TableRow>
                    </TableBody>
                </Table>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.IsFull.OnDesktop.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Light Header</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Use the <code>Theme</code> attribute to make header appear light or dark gray.</CardText>
            </CardBody>
            <CardBody>
                <Table>
                    <TableHeader ThemeContrast="ThemeContrast.Light">
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>First Name</TableHeaderCell>
                            <TableHeaderCell>Last Name</TableHeaderCell>
                            <TableHeaderCell>Username</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        <TableRow>
                            <TableRowHeader>1</TableRowHeader>
                            <TableRowCell>Mark</TableRowCell>
                            <TableRowCell>Otto</TableRowCell>
                            <TableRowCell>@@mdo</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>2</TableRowHeader>
                            <TableRowCell>Jacob</TableRowCell>
                            <TableRowCell>Thornton</TableRowCell>
                            <TableRowCell>@@fat</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>3</TableRowHeader>
                            <TableRowCell>Larry</TableRowCell>
                            <TableRowCell>the Bird</TableRowCell>
                            <TableRowCell>@@twitter</TableRowCell>
                        </TableRow>
                    </TableBody>
                </Table>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsFull.OnDesktop.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Dark Header</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Use the <code>Theme</code> attribute to make header appear light or dark gray.</CardText>
            </CardBody>
            <CardBody>
                <Table>
                    <TableHeader ThemeContrast="ThemeContrast.Dark">
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>First Name</TableHeaderCell>
                            <TableHeaderCell>Last Name</TableHeaderCell>
                            <TableHeaderCell>Username</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        <TableRow>
                            <TableRowHeader>1</TableRowHeader>
                            <TableRowCell>Mark</TableRowCell>
                            <TableRowCell>Otto</TableRowCell>
                            <TableRowCell>@@mdo</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>2</TableRowHeader>
                            <TableRowCell>Jacob</TableRowCell>
                            <TableRowCell>Thornton</TableRowCell>
                            <TableRowCell>@@fat</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>3</TableRowHeader>
                            <TableRowCell>Larry</TableRowCell>
                            <TableRowCell>the Bird</TableRowCell>
                            <TableRowCell>@@twitter</TableRowCell>
                        </TableRow>
                    </TableBody>
                </Table>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column ColumnSize="ColumnSize.IsFull.OnDesktop.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Contextual Colors</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Use <code>Color</code> on table rows or individual cells.</CardText>
            </CardBody>
            <CardBody>
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        <TableRow Color="Color.Primary">
                            <TableRowHeader>1</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>2</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow Color="Color.Success">
                            <TableRowHeader>3</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>4</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow Color="Color.Info">
                            <TableRowHeader>5</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>6</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow Color="Color.Warning">
                            <TableRowHeader>7</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>8</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow Color="Color.Danger">
                            <TableRowHeader>9</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                    </TableBody>
                </Table>
            </CardBody>
        </Card>
    </Column>
    <Column ColumnSize="ColumnSize.IsFull.OnDesktop.IsHalf.OnWidescreen">
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Contextual With Background Color</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Use <code>Background</code> and <code>TextColor</code> on table rows or individual cells.</CardText>
            </CardBody>
            <CardBody>
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        <TableRow Background="Background.Dark" TextColor="TextColor.White">
                            <TableRowHeader>1</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>2</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow Background="Background.Success" TextColor="TextColor.White">
                            <TableRowHeader>3</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>4</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow Background="Background.Info" TextColor="TextColor.White">
                            <TableRowHeader>5</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>6</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow Background="Background.Warning" TextColor="TextColor.White">
                            <TableRowHeader>7</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>8</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow Background="Background.Danger" TextColor="TextColor.White">
                            <TableRowHeader>9</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                    </TableBody>
                </Table>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column>
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Responsive</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>Use <code>Responsive</code> for horizontally scrolling tables.</CardText>
            </CardBody>
            <CardBody>
                <Table Responsive="true">
                    <TableHeader>
                        <TableRow>
                            <TableHeaderCell>#</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                            <TableHeaderCell>Column heading</TableHeaderCell>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        <TableRow>
                            <TableRowHeader>1</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>2</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                        <TableRow>
                            <TableRowHeader>3</TableRowHeader>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                            <TableRowCell>Column content</TableRowCell>
                        </TableRow>
                    </TableBody>
                </Table>
            </CardBody>
        </Card>
    </Column>
</Row>